<template>
  <div>
    <div :style="{ width: width + 'px' }" ref="wangeditorToolbar" class="wangeditor_toolbar"></div>
    <div :style="{ width: width + 'px', height: height + 'px' }" ref="wangeditor" class="wangeditor"></div>
  </div>
</template>
<script>
import Editor from 'wangeditor'
import Emitter from 'iview/src/mixins/emitter'
// import { oneOf, findComponentUpward } from 'iview/src//utils/assist'
import axios from '@/libs/server'
export default {
  name: 'wangeditor_component',
  mixins: [Emitter],
  // model: {
  //   prop: 'vlaue',
  //   event: 'input'
  // },
  props: {
    customConfig: {
      required: false,
      type: Object,
      default: () => {
        return { zIndex: 100, uploadImgMaxLength: 2 }
      }
    },
    width: {
      type: Number,
      default: 700
    },
    height: {
      type: Number,
      default: 400
    },
    value: {
      type: String
    }
  },
  data () {
    return {
      editor: null,
      currentValue: this.value
    }
  },
  watch: {
    value (val) {
      if (val === this.currentValue) return null
      this.currentValue = val
      // this.$emit('input', val)
    },
    currentValue (val) {
      this.editor && this.editor.txt.html(val)
      this.$emit('input', val)
    }
  },
  mounted () {
    this.createEditor()
  },
  methods: {
    createEditor () {
      const _this = this
      this.editor = new Editor(this.$refs.wangeditorToolbar, this.$refs.wangeditor)
      Object.assign(this.editor.customConfig, this.customConfig)
      // debugger
      this.editor.customConfig.onchange = html => {
        this.currentValue = html !== '<p><br></p>' ? html : ''
        this.$emit('on-change', this.currentValue)
        this.$emit('input', this.currentValue)
        this.$nextTick(() => {
          this.dispatch('FormItem', 'on-form-change', this.currentValue)
        })
      }
      // this.editor.customConfig.onfocus = () => {
      //   this.$emit('on-focus')

      // }
      this.editor.customConfig.onblur = html => {
        // console.log(html).
        this.currentValue = html !== '<p><br></p>' ? html : ''
        this.$emit('input', this.currentValue)
        this.$emit('on-blur', this.currentValue)
        this.$nextTick(() => {
          this.dispatch('FormItem', 'on-form-blur', this.currentValue)
        })
      }
      this.editor.customConfig.customUploadImg = async (files, insert) => {
        for (let index = 0; index < files.length; index++) {
          (async file => {
            const res = await _this.uploadImg(file)
            if (res.data.errr_msg) return this.$Message.error(res.data.errr_msg)
            insert(res.data.full_img_url)
          })(files[index])
        }
        // insert('http://file02.16sucai.com/d/file/2015/0128/8b0f093a8edea9f7e7458406f19098af.jpg')
      }
      this.editor.create()
    },
    uploadImg (file) {
      let formData = new FormData()
      formData.append('file', file)
      return axios.request({
        url: this.$config.uploadImg,
        method: 'post',
        data: formData
      })
    }
    // $config.uploadImg
  }
}
</script>
<style lang="less" scoped>
.wangeditor_toolbar {
  border: 1px solid #ccc;
}
.wangeditor {
  border: 1px solid #ccc;
  border-top: none;
}
</style>
